<!--
底部弹出选择栏
props:
menulist:
显示的内容，数组
-->
<template>
    <transition name="fade" @beforeEnter="beforeEnter" @afterEnter="afterEnter" @beforeLeave="beforeLeave">
      <div class="mask" id="mask" v-if="show" @click="show=false">
        <div class="menu_list">
            <div class="menu-list-container">
          <ul class="menu_ul">
            <li v-for="(menu,index) in menulist" :key="index" class="menu_li" @click.stop="select(index,menu)">{{menu}}</li>
          </ul>
          <div class="cancel_btn" @click.stop="hide()">取消</div>
        </div>
        </div>
      </div>
    </transition>
</template>
<style lang="less" scoped>
@import url('../../style/mixin.less');
@import url('./theme.less');
.fade-enter-active, .fade-leave-active {
  transition: opacity .1s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
    .mask {
      position: fixed;
      width: 100vw;
      height: 100vh;
      background: @action-sheet-mask-background-color;
      top: 0;
      left: 0;
      z-index: 501;
      .menu_list {
        width: 100vw;
        background: white;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 502;
      .transition(.3s);
        .cancel_btn {
          width: 100vw;
          height: 54px;
          border-top: 10px solid rgb(239, 239, 244);
          line-height: @action-sheet-mask-item-height;
          text-align: center;
          font-size: 15px;
          color: #000;
        }

        .menu_ul {
          width: 100vw;
          margin: 0;
          padding: 0;
          border: 0;
          .menu_li {
            line-height: @action-sheet-mask-item-height;
            list-style: none;
            font-size: 15px;
            text-align: center;
            line-height: @action-sheet-mask-item-height;
            color: black;
            border-bottom: 1px solid #EEE;
          }
        }
      }
    }


  

</style>
<script>
  export default {
    data: function () {
      return {
        show: false
      }
    },
    props: {
      menulist: {
        required:true
      }
    },
    methods: {
      hide: function () {
        this.show = false;
        this.$emit('cancel');
      },
      select: function (index, val) {
        var t = this;
        this.show = false;
        this.$emit('selected', index, val);
      },
      beforeEnter:function(el){
        el.querySelector('.menu_list').style.height=0;
      },
      afterEnter:function(el){
        el.querySelector('.menu_list').style.height=el.querySelector('.menu-list-container').offsetHeight+'px';
      },
      beforeLeave:function(el){
         el.querySelector('.menu_list').style.height=0;
      }
    },
    mounted(){
        this.show=true;
    }
  }

</script>
